<template>
  <div class="calendarHelper" style="height: 390px;">
    <el-card class="calendarHelper">
      <div slot="header" class="attributes">
        <img src="@/assets/images/rcgl.png" class="rcgl">
        <b>时间助手</b>
        <el-button style="float: right; padding: 3px 0;color: #768893;" type="text">进入应用</el-button>
      </div>
      <div class="calendarManage calendar-box" v-loading="loading">
        <el-calendar
          class="calendar"
          :range='dateRange'
          v-model="value">
          <template slot="dateCell" slot-scope="{ date, data }">
            <div :class="data.isSelected ? 'is-selected cell-container' : 'cell-container'" @click="onClickUnRead(date, data)">
              <div class="word-container">
                <div style="text-align: center;" v-for="item in allUnRead" :key="item.day">
                  <div class="status-point" v-show="item.date==data.day"/>
                </div>
                <div
                  class="date"
                  :class="
                    date.getDay() === 6 || date.getDay() === 0 ? 'red-word' : ''
                  "
                >
                  {{ data.day.split("-").slice(2).join("-") }}
                </div>
                <div class="solar-terms">
                  {{ solarToLunar(date, data) }}
                </div>
                <div class="festival">
                  {{ isVacation(date, data) ? "休" : "" }}
                </div>
              </div>
              <div class="wrap"></div>
            </div>
          </template>
        </el-calendar>
        <div class="schedule">
          <div class="title">
            今 日 日 程
          </div>
          <div class="allSchedule">
            <el-row class="addSchedule" type="flex" align="middle">
              <el-button class="but1" type="text" @click="intoShedule">添加日程</el-button>
            </el-row>
            <el-row class="todaySchedule" v-for="item in unRead" :key="item.index">
              <div v-if="item.status === 0 && !isLate(item.endTime)" class="unReadSchedule unReadSchedule-progress" @click="editShedule">
                <p class="todaySchedule-content"> {{ item.content }} </p>
                <p class="todaySchedule-time"> {{jnpf.dateFormat(item.startTime,'HH:mm')}} - {{jnpf.dateFormat(item.endTime,'HH:mm')}} </p>
              </div>
              <div v-if="item.status === 1"  class="unReadSchedule unReadSchedule-success" @click="editShedule">
                <p class="todaySchedule-content"> {{ item.content }} </p>
                <p class="todaySchedule-time"> {{jnpf.dateFormat(item.startTime,'HH:mm')}} - {{jnpf.dateFormat(item.endTime,'HH:mm')}} </p>
              </div>
              <div v-if="item.status === 0 && isLate(item.endTime)" class="unReadSchedule unReadSchedule-danger" @click="editShedule">
                <p class="todaySchedule-content"> {{ item.content }} </p>
                <p class="todaySchedule-time"> {{jnpf.dateFormat(item.startTime,'HH:mm')}} - {{jnpf.dateFormat(item.endTime,'HH:mm')}} </p>
              </div>
            </el-row>
            <el-row class="show">
              <span>已显示全部日程</span>
            </el-row>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
// import {getListRun} from '@/api/todoWork/index.js'
import calendar from '@/utils/lunarDay.js'

  export default {
    name: 'calendarHelper',
    components: {  },
    data() {
      return {
        Height: 300,
        loading: false,
        value: new Date(),
        dateRange: [],
        monday: '',
        sunday: '',
        allUnRead: [],
        unRead: []
      }
    },
    created() {
      this.getDateList()
    },
    // 默认渲染完成后
    mounted(){
      // 获取demo元素
      // let parent = document.querySelector(
      //   ".el-calendar__header"
      // )
      // // 创建一个button元素
      // let button = document.createElement("button")
      // button.type = 'button' // 类型
      // button.className = 'el-button el-button--plain el-button--mini' // Calendar默认按钮样式
      // button.textContent = '全部日程' // 文本
      // button.style.cssText = "background-color: #ff6a00;color:white;margin-left:auto" // 样式
      // button.onclick = function(){ // 触发事件
      //   queryExistDataDays()
      // }
      // parent.appendChild(button) //添加
      // var that = this
      // function queryExistDataDays(){ // 事件内容
      //   const { href } = that.$router.resolve({
      //     path: "/scheduleManagementHome",
      //     // query: {
      //     //     id: row.id,
      //     //   },
      //     });
      //   window.open(href, '_blank');
      //   return Promise.resolve(false); // 不刷新表格
      // }
    },
    methods: {
      isLate(date){
            var today = new Date();
            today.setHours(0, 0, 0, 0);

            var someDate = new Date(date.slice(0,10));

            if (someDate < today) {
              return true
            } else {
              return false
            }
          },
          // 公立转农历
          solarToLunar(slotDate, slotData) {
            let solarDayArr = slotData.day.split("-");
            let lunarDay = calendar.solar2lunar(
              solarDayArr[0],
              solarDayArr[1],
              solarDayArr[2]
            );
            // 农历日期
            // let lunarMD = lunarDay.IMonthCn + lunarDay.IDayCn;
            let lunarMD;
            if (lunarDay.IDayCn === '初一') {
              lunarMD = lunarDay.IMonthCn
            } else {
              lunarMD = lunarDay.IDayCn;
            }
            // 公历节日\农历节日\农历节气
            let festAndTerm = [];
            festAndTerm.push(
              lunarDay.festival == null ? "" : " " + lunarDay.festival
            );
            festAndTerm.push(
              lunarDay.lunarFestival == null ? "" : "" + lunarDay.lunarFestival
            );
            festAndTerm.push(lunarDay.Term == null ? "" : "" + lunarDay.Term);
            festAndTerm = festAndTerm.join("");

            return festAndTerm == "" ? lunarMD : festAndTerm;
          },
          isFestival(slotDate, slotData) {
            let solarDayArr = slotData.day.split("-");
            let lunarDay = calendar.solar2lunar(
              solarDayArr[0],
              solarDayArr[1],
              solarDayArr[2]
            );
            // 公历节日\农历节日\农历节气
            let festAndTerm = [];
            festAndTerm.push(
              lunarDay.festival == null ? "" : " " + lunarDay.festival
            );
            festAndTerm.push(
              lunarDay.lunarFestival == null ? "" : "" + lunarDay.lunarFestival
            );
            festAndTerm.push(lunarDay.Term == null ? "" : "" + lunarDay.Term);
            festAndTerm = festAndTerm.join("");

            return {
              solarDate: lunarDay.date,
              lunarDate: lunarDay.lunarDate
            };
          },

          isVacation(date, data) {
            let obj = this.isFestival(date, data);

            let valSolar = obj.solarDate.slice(5);
            let valLunar = obj.lunarDate.slice(5);

            let solar = calendar.isSolarPublicHoliday(valSolar);
            let lunar = calendar.isLunarPublicHoliday(valLunar);

            return solar || lunar;
          },
          getScheduleList() {
            const now = new Date()
            const nowTime = now.getTime();
            const today = new Date(nowTime)
            const todayYear = today.getFullYear()
            const todayMonth = today.getMonth() + 1
            const todayDay = today.getDate()
            const formatteToday = `${todayYear}-${todayMonth}-${todayDay}`;
            // getListRun({'startDate': this.monday, 'endDate': this.sunday, 'groupRunDate': 1}).then(res => {
            //   if (res.code === 200) {
            //     this.allUnRead = res.data
            //     this.updataUnRead(formatteToday)
            //   }
            //   console.log(this.unRead)
            // }).finally(() => {
            //   this.loading = false
            // })
          },
          getDateList() {
            this.getThisWeekDate(0)
            this.getNextWeekDate(7)
            this.dateRange = [this.monday, this.sunday]
            this.getScheduleList()
          },
          getThisWeekDate(num) {
            let now = new Date();
            let nowTime = now.getTime();
            let day = now.getDay() > 0 ? now.getDay() : 7
            let oneDayTime = 24 * 60 * 60 * 1000;
            let n = oneDayTime * num;
            // 获取周一
            let MondayTime = nowTime - (day - 1) * oneDayTime + n;
            const Monday = new Date(MondayTime)
            const yearMonday = Monday.getFullYear(); // 获取年份
            const monthMonday = Monday.getMonth() + 1; // 获取月份，需要加1
            const dayMonday = Monday.getDate(); // 获取日期
            const formattedMonday = `${yearMonday}-${monthMonday}-${dayMonday}`; // 拼接成格式化后的日期字符串
            this.monday = formattedMonday

          },
          getNextWeekDate(num) {
            let now = new Date();
            let nowTime = now.getTime();
            let day = now.getDay() > 0 ? now.getDay() : 7
            let oneDayTime = 24 * 60 * 60 * 1000;
            let n = oneDayTime * num;
            // 获取周日
            let SundayTime = nowTime + (7 - day) * oneDayTime + n;
            const Sunday = new Date(SundayTime)
            const yearSunday = Sunday.getFullYear(); // 获取年份
            const monthSunday = Sunday.getMonth() + 1; // 获取月份，需要加1
            const daySunday = Sunday.getDate(); // 获取日期
            const formattedSunday = `${yearSunday}-${monthSunday}-${daySunday}`; // 拼接成格式化后的日期字符串
            this.sunday = formattedSunday

          },
          intoShedule() {
            this.$message.warning('正在开发中，敬请期待')
            // this.$refs.addTodoFormRef.dialogVisible = true
          },
          editShedule() {

          },
          onClickUnRead(date, data) {
            this.updataUnRead(data.day)
          },
          updataUnRead(data) {
            for (let i = 0; i < this.allUnRead.length; i++) {
              var item = this.allUnRead[i];
              if(item.date==data){
                this.unRead = this.allUnRead[i].scheduleMainEntities
                return;
              } else {
                this.unRead = []
              }
            }
          },
    }
  }
</script>
<style lang="scss" scoped>
  .calendar-box {
    //height: 80px;
    background: #FFFFFF;
  }

  .schedule {
    height: calc(100% - 250px);
    margin: 50px 0 20px 0;
  }

  .calendar {
    height: 250px;
  }

  .title {
    margin-left: 20px;
    margin-top: 20px;
    flex: 5;
    font-size: 18px;
    font-weight: 500;
    color: #333333;
    line-height: 30px;
  }

  .addSchedule {
    color: #FFFFFF;
    border-width: 1px;
    border-style: dashed;
    border-color: black;
    justify-content: center;
    align-items: center;
    margin: 10px 20px 30px;
  }

  .todaySchedule {
    color: #333333;
    border-width: 1px;
    border-color: black;
    justify-content: center;
    align-items: center;
    margin: 1px 20px 30px;
  }

  .but1 {
    font-size: 18px;
    // margin-left: 50px;
    width: 450px;
  }

  .show {
    text-align: center;
    margin-bottom: 20px;
    color: #888a8e;
  }

  // 日历内容部分
  .cell-container {
    height: 100%;
    width: 100%;

    position: relative;
  }
  .is-selected {
    color: #1989FA;
    background-color: #F2F8FE;
  }

  .word-container {
    height: 100%;
    font-size: 10px;

    .status-point {
      display: inline-block;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background-color: #1989FA;
    }

    .date {
      font-size: 16px;
      z-index: 4;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      top: 20px;
    }

    .solar-terms {
      z-index: 4;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      bottom: 2px;
    }

    .festival {
      position: absolute;
      font-weight: bold;
      margin: 10px 0 0 10px;
      z-index: 4;
    }

    .red-word {
      color: #ff4949;
      position: absolute;
      z-index: 4;
    }
  }

  > > > .el-calendar-day {
    //margin: 4px;
    padding: 0;
    //border-radius: 8px;
    // background: #FFFFFF;
  }

  // 日历样式
  > > > .el-calendar__header .el-calendar__title {
    position: absolute;
  }

  .wrap {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    // background: #FFFFFF;
    //border-radius: 8px;
  }
  .todaySchedule-content {
    width: 75%;
  }
  .todaySchedule-time {
    text-align: center;
    width: 25%;
  }

  ::v-deep .unReadSchedule {
        position: relative;
        padding-left: 12px;
        padding: 10px;
        font-weight: 500;
        display: flex;
    }
    ::v-deep .unReadSchedule-progress {
        background-color: #f2f8fe;
        border-left: #00afff 2px solid;
        color: #00afff;
    }
    ::v-deep .unReadSchedule-success {
        background-color: rgba(204, 204, 204, 0.1);
        border-left: #ccc 2px solid;
        color: #ccc;
    }
    ::v-deep .unReadSchedule-danger {
        background-color: rgba(255, 30, 0, 0.08);
        border-left: #ff1e00 2px solid;
        color: #ff1e00;
    }

  ::v-deep .el-calendar-table .el-calendar-day {
    padding: 8px 0 8px 0;
  }

</style>
<style scoped>
  .calendarHelper {
    height: 100%;
  }
  .calendarManage {
    height: 300px;
    background-color: #FFFFFF;
    border-radius: 8px;
    position: relative;
    overflow: auto;
    border-bottom: 1rem solid rgba(255, 255, 255, 1);
  }
  .rcgl{
    border: 0px;
    border-radius: 5px;
    width: 18px;
    height: 18px;
    margin-right: 5px;
    vertical-align: middle;
  }

  .calendarHelper /deep/ .el-card__body{
     height: 100% !important;
     display: flex;
     flex-direction: column;
     overflow: hidden;
     padding: 0px 20px 20px 20px;
  }
  .calendarHelper /deep/ .el-card__header {
    border-bottom: none;
  }
  .calendarHelper  /deep/ .el-calendar__header{
    padding: 10px 20px;
  }
</style>
